<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">123123</p>
	<p class="desc"></p>
	
	
	
	
	
	
</div>

</body>
<script>
const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		
	}
},
mounted: function(){
	//实例挂载完成后被调用
	// console.log("实例挂载完成后被调用");
	this.$nextTick(function () {
		// 仅在整个视图都被渲染之后才会运行的代码
		console.log("仅在整个视图都被渲染之后才会运行的代码");
		// this.$refs.myParRef.focus();		//让myParRef组件自动获取焦点，但没生效
		
	});
	// console.log("实例挂载完成后被调用2");
},
computed:{
	getNum(){
		return function(num){
			return num * 10;
		}
	},
	retStr(){
		return function(val){
			return 'val:' + val;
		};
	},
	
},
methods:{
	fn(){
		this.message = "欢迎来到HTML中文网。";
	},
	hello(par){
		this.message = "参数值为：" + par;
	},
	
	
},
watch:{
	message:function(value){
		console.log('message 的值为：' +value);
	},
},
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>